<template>
  <a-layout-header class="nav-bar">
    <div class="logo-container">IES-PLAN</div>
    <div class="center-container"></div>
    <div class="user-container">
      <a-dropdown>
        <div class="user-detail">
          <a-avatar>
            <a-icon slot="icon"
                    type="user" />
          </a-avatar>
          <div class="user-name">{{username}}</div>
        </div>
        <a-menu slot="overlay">
          <a-menu-item @click="goProfilePage">
            <a-icon type="user" />
            <span>个人资料</span>
          </a-menu-item>
          <a-menu-item class="logout"
                       @click="logout">
            <a-icon type="poweroff" />
            <span>登出</span>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
  </a-layout-header>
</template>

<script>
import api from "./../../common/api";
import {clearToken} from './../../common/store'

export default {
  data () {
    return {
      username: ''
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      this.$get(api.getUserInfo).then(res => {
        if (res) {
          let user = res;
          this.username = user.login;
        }
      })
    },
    goProfilePage () {
      this.$router.push("/profile");
    },
    logout() {
      clearToken();
      this.$router.replace("/trainEntrance");
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@/styles/global.less";

.nav-bar {
  background: transparent;
  position: fixed;
  z-index: 100;
  width: 100%;
  display: flex;
  height: 96px;
  line-height: 96px;

  .logo-container {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 5px;
  }
  .center-container {
    flex: 1;
  }
  .user-container {
    .user-detail {
      display: flex;
      justify-content: center;
      align-items: center;
      .user-name {
        margin-left: 10px;
      }
    }
  }
}
.logout {
  color: @btn-danger-bg;
}
</style>
